<template>
	<view class="motion">
		<view class="header">
			<!-- view class="search">
				<u-search placeholder="请输入搜索内容" v-model="keyword" :showAction="false"></u-search>
			</view>
			<view class="box">
				语音检索
			</view> -->
			
			<!-- search -->
			<view class="search">
				<u-search 
					:clearabled="true"
					 class="search-content" 
					 actionText="语音检索"
					 @search="enterSearch"
				></u-search>
			</view>
			
		</view>
		<view class="mains">
			<view class="list">
				<!-- 左侧运动菜单 -->
				<view class="list-item">运动处方库</view>
				<view 
					v-for="(item, index) in motionClassifyData" 
					:key="item.id" 
					:class="{active: listActiveIndex == index}"
					class="list-item"
					@click="listItemClick(item.id, index)">
					{{item.name}}
				</view>
				<view 
					class="list-item" 
					:class="{active: listActiveIndex === 100}"
					@click="handleMyMotion">
					我的运动
				</view>
			</view>
			
			<!-- 动态运动 -->
			<view class="view">
				
				<view class="view_title" v-if="listActiveIndex != 100">
					<view
						v-for="(item, index) in motionClassifyTopData" 
						:key="item.id" 
						:class="{'view_title_active' :listItemActiveIndex === index}"
						@click="listTopItemClick(item, index)">
						
						{{item.name}}
					</view>
					
				</view>
				
				<!-- 图片 -->
				<view class="action" v-if="listActiveIndex != 100">
					<image :src="imgUrl" mode="" @click="handleDetail"></image>
				</view>
				
				
				<!-- 我的运动 -->
				<view class="my_motion_view" v-if="listActiveIndex === 100" style="overflow: hidden;">
					<scroll-view class="my_motion_list" :scroll-y="true" :show-scrollbar="true">
						<view 
							class="my_motion_list_item"
							v-for="(item, index) in myMotionList" 
							:key="item.id">
							<view>{{item.name}}</view>
							<view>	
								<view>
									<radio-group @change="radioChange">
										<label class="uni-list-cell uni-list-cell-pd">
											<view>
												<radio :value="item.id" :checked="index === currentChecked" />
											</view>
										</label>
									</radio-group>
								</view>
								<view class="del" @click="handleDeleteMyMotion(item.id)">删除</view>
							</view>
						</view>
					</scroll-view>
					<view class="view_top" @click="addCartClick">
						<view class="icon">
							<u-icon name="plus" color="#2BC3A4" size="80"></u-icon>
						</view>
						<view class="name">添加您喜欢的运动</view>
					</view>
					<view class="view_bottom" @click="startMotion">
						开始运动
					</view>
				</view>
				<u-popup :show="isShow" mode="bottom" @close="isShow = false">
					<view class="popup-container">
						<view class="pop_main">
							<h2>运动信息</h2>
							<view class="title">
								<u--input
								    placeholder="请输入运动方案名称"
								    border="surround"
								    v-model="addParams.name"
								  ></u--input>
							</view>
							<view class="list">
								<h2>当前运动列表</h2>
								<scroll-view scroll-y style="height: 100px" v-if="addParams.list != ![]">
									<view v-for="item in addParams.list" :key="item.id">
										{{item.montionName}}
										<!-- {{item.id}} -->
									</view>
								</scroll-view>
								<view v-if="addParams.list == ![]" style="color:red">当前暂无添加运动</view>
							</view>
						</view>
						<view class="base-operation-two opeartion">
							<view class="save"  @click="handles">保存</view>
							<view class="cancel" @click="isShow = false">取消</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import { motionClassify, myMotionList, addMyMotionList, deleteMyMotion } from '../../service/api.js'
	export default {
		data() {
			return {
				baseUrl: this.$BASEImageUrl,
				listActiveIndex: 0, //左侧处方索引
				listItemActiveIndex: 0, //上分二级处方索引
				motionClassifyData: [],
				motionClassifyTopData: [],
				myMotionList: [],
				imgUrl: "",
				classifyId: "",
				motionName: "",
				//数据参数
				obj: {
					current: 1,
					size: 10,
					type: 1,
					parentId: 0,
					name: ""
				},
				isShow: false,
				addParams: {
					name: "",
					list: []
				},
				currentChecked: 0,
			}
		},
		onLoad() {
			this.getMotionClassify();
			
		},
		onShow() {
			uni.setTabBarStyle({
				selectedColor: "#2BC3A4"
			})
		},
		onReady() {
			this.addParams.list = this.$store.state.cartGoods;
		},
		methods: {
			handleDeleteMyMotion(id) {
				const that = this;
				uni.showModal({
					title: "是否删除该运动方案",
					success: function (e) {
						if (e.confirm) {
							deleteMyMotion(id).then(res => {
								if(res.status == 200) {
									uni.showToast({
										duration: 1000,
										title: "删除成功",
										icon: 'success',
										success: () => {
											that.handleMyMotion()
										}
									})
								}
							})
						}
					}
				})
			},
			radioChange(evt) {
				for (let i = 0; i < this.myMotionList.length; i++) {
					if (this.myMotionList[i].id == evt.detail.value) {
							this.currentChecked = i;
							break;
					}
				}
			},
			getMotionClassify() {
				//左侧数据接口
				motionClassify(this.obj).then(res => {
					if(res.status == 200) {
						this.motionClassifyData = res.data.records;
						
						let item = res.data.records[0];
						
						if(item) {
							this.listItemClick(item.id, this.listItemActiveIndex);
						} else {
							this.listItemClick("", this.listItemActiveIndex);
						}
						
											
					}
				})
			},
			startMotion() {
				uni.navigateTo({
					url: '../myMotion/myMotion?id=' + this.myMotionList[this.currentChecked].id
				})
			},
			handleDetail() {
				uni.navigateTo({
					url: `../motionDetail/motionDetail?id=${this.classifyId}&name=${this.motionName}`
				})
			},
			listItemClick(parentId, index) {
				
				this.listActiveIndex = index ;

				const obj = {
					current: 1,
					size: 10,
					type: 2,
					parentId,
					name: ""
				}
				motionClassify(obj).then(res => {
					if(res.status == 200) {
						this.motionClassifyTopData = res.data.records;
						this.listItemActiveIndex = 0;
						this.imgUrl = this.$BASEImageUrl + res.data.records[0].picUrl;
						this.classifyId = res.data.records[0].id;
						this.motionName = res.data.records[0].name;
						
					}
				})
				
			},
			listTopItemClick(item, index) {
				this.listItemActiveIndex = index;
				this.imgUrl = this.$BASEImageUrl + item.picUrl;
				this.classifyId = item.id;
				this.motionName = item.name;
			},
			
			handleMyMotion() {
				myMotionList().then(res => {
					this.listActiveIndex = 100;
					this.myMotionList = res.data.records;
				})
			},
			
			enterSearch(val) {
				this.obj.name = val;
				// this.listActiveIndex = 0; 	
				this.getMotionClassify();
			},
			
			addCartClick() {
				this.isShow = true;
			},
			handles() {
				if(this.addParams.name !== "") {
					const newParams = {
						name: this.addParams.name,
						list: this.addParams.list.map(item => ({
							prescriptionId: item.prescriptionId,
							sortNum: item.sortNum
						}))
					}
					addMyMotionList(newParams).then(res => {
						if(res.status == 200) {
							uni.showToast({
								icon: "success",
								title: "添加成功",
								duration: 1000
							})
							this.handleMyMotion();
							this.isShow = false;
						} else {
							uni.showToast({
								icon: "error",
								title: res.message,
								duration: 1000
							})
						}
					})
				} else {
					uni.showToast({
						icon: "error",
						title: "请输入运动方案名称",
						duration: 1000
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.motion{
	height: 100vh;
	overflow: hidden;
	padding: 0 20px;
	.header {
		// display: flex;
		
		// .search {
		// 	flex: 1;
		// 	height: 40px;
		// }
		.search {
			height: 40px;
			overflow: hidden;
			padding-bottom: 10px;
			margin-top: 10px;
			::v-deep .u-search {
			 .u-search__content {
				 padding: 6px 10px;
				 background-color: #fff;
			 }
			 .u-search__action {
				 display: inline-block;
				 width: 80px;
				 font-size: 14px;
				 height: 40px;
				 background-color: #2BC3A4;
				 text-align: center;
				 line-height: 40px;
				 padding: 0 4px;
				 color: #fff;
				 border-radius: 40px;
				 margin-left: 10px;
			 }
			}
		}
		
		.box {
			width: 80px;
			height: 40px;
			background-color: #096;
			color: #fff;
			border-radius: 20px;
			text-align: center;
			line-height: 40px;
			font-size: 14px;
		}
	}
	.mains {
		display: flex;
		> .list {
			// width: 30%;
			width: 100px;
			// overflow: hidden;
			text-overflow: ellipsis;
			// margin-left: 20px;
			// background-color: pink;
			.list-item:first-child {
				font-weight: bold;
			}
			.list-item {
				height: 50px;
				line-height: 50px;
				
			}
			.active {
				color: #2BC3A4;
				position: relative;
				&::before {
					content: "　";
					width: 4px;
					height: 20px;
					background-color: #2BC3A4;
					position: absolute;
					top: 15px;
					left: -20px;
				}
			}
		}
		.view {
			flex: 1;
			position: relative;
			height: calc(100vh - 80px);
			overflow: hidden;
			.view_top {
				margin-top: 10px;
				// margin-left: 20px;
				border: 2px solid #2BC3A4;
				color: #2BC3A4;
				height: 130px;
				border-radius: 12px;
				view {
					text-align: center;
					font-size: 18px;
					letter-spacing: 1px;
				}
				::v-deep .u-icon__icon {
					margin: 0 auto;
				}
				.icon {
					padding: 20px 0 14px 0;
				}
			}
			
			.my_motion_list {
				height: 300px;
				overflow: hidden;
				.my_motion_list_item {
					height: 40px;
					line-height: 40px;
					margin-bottom: 4px;
					text-indent: 10px;
					background-color: pink;
					color: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					> view:last-child {
						// width: 60px;
						display: flex;
						align-items: center;
						.del {
							padding-right: 10px;
						}
					}
				}
			}
			
			.view_title {
				display: flex;
				overflow: auto;
				margin: 0 -6px;
				padding: 10px 0;
				view{
					flex: none;
					background-color: rgba(226, 226, 226, 0.2);
					padding: 6px 10px;
					font-size: 14px;
					display: inline-block;
					color: #6B6B6B;
					margin: 0 6px;
					border-radius: $uni-border-radius-base;
				}
				.view_title_active {
					background-color: rgba(169, 226, 229, 0.2);
					color: #2BC3A4;
				}
			}
			
			.view_bottom {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 50px;
				line-height: 50px;
				background-color: #F2AF60;
				text-align: center;
				border-radius: 40px;
				color: #fff;
				// margin: 0 20px 20px;
				
			}
			
			.action {
				width: 100%;
				height: 200px;
				// background-color: pink;
				image {
					width: 100%;
				}
			}
		}
	}
}

.popup-container {
	height: 300px;
	padding: 0 20px;	
	position: relative;
	overflow: hidden;
	.pop_main {
		h2 {
			padding: 10px 0;
		}
	}
	.opeartion {
		position: absolute;
		bottom: 5px;
		left: 20px;
		right: 20px;
	}
}


</style>
